<!-- 资本月报 -->
<template>
  <div class="monthlyReport">
    <van-nav-bar title="资本月报" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model:active="activeName" @click="onClickTab" sticky swipeable>
      <van-tab title="人力资源" name="0">
        <tab1></tab1>
      </van-tab>
      <van-tab title="绩效月报" name="2">
        <tab2></tab2>
      </van-tab>
      <van-tab title="主要经济指标" name="3"><tab3></tab3></van-tab>
      <van-tab title="公司经济指标" name="4"><tab4></tab4></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import tab1 from "./components/tab1";
import tab2 from "./components/tab2";
import tab3 from "./components/tab3";
import tab4 from "./components/tab4";
export default {
  name: "monthlyReport",
  components: {
    tab1,
    tab2,
    tab3,
    tab4,
  },
  setup() {
    const router = useRouter();
    console.log("1-开始创建组件-setup");
    const data = reactive({
      activeName: "0",
    });
    onBeforeMount(() => {
      console.log("2.组件挂载页面之前执行----onBeforeMount");
    });
    onMounted(() => {
      console.log("3.-组件挂载到页面之后执行-------onMounted");
    });
    const refData = toRefs(data);
    //返回按钮
    const onClickLeft = () => {
      router.push({ path: "/analysis" });
    };
    //点击tab
    const onClickTab = (name, title) => {
      console.log(name, title);
    };
    return {
      ...refData,
      onClickLeft,
      onClickTab,
    };
  },
};
</script>
<style scoped>
.monthlyReport {
  background-color: #f5f4f9;
}
</style>
